<div class="row">
    <div class="col-lg-3">
        <div class="panel ba" style="height:431px;">
            <div class="panel-heading" style="padding-top:15px;">
                <div class="panel-title" style="color:#333;font-weight:bold;font-family:'Microsoft YaHei';font-size:18px;">
                    {{('home.homepage.salesportal.myCust' | translate) || '我的客户'}}
                </div>
            </div>
            <div class="list-group">
                <div class="list-group-item">
                    <div class="media-box">
                        <div class="pull-left">
                            <span class="fa-stack">
                                <em class="fa fa-circle fa-stack-2x text-purple"></em>
                                <em class="fa fa-users fa-stack-1x fa-inverse text-white"></em>
                            </span>
                        </div>
                        <div class="media-box-body clearfix">
                            <h5 class="text-muted pull-right ml" style="margin-top: 6px;">{{shuju?.countCust}}</h5>
                            <div class="media-box-heading" style="margin:5px 0 0;"><span class="text-purple m0">
                                {{('home.homepage.salesportal.countCust' | translate) || '客户数量'}}
                            </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list-group-item" style="margin-top:15px;">
                    <div class="media-box">
                        <div class="pull-left">
                            <span class="fa-stack">
                                <em class="fa fa-circle fa-stack-2x text-info"></em>
                                <em class="fa fa-level-up fa-stack-1x fa-inverse text-white"></em>
                            </span>
                        </div>
                        <div class="media-box-body clearfix">
                            <h5 class="text-muted pull-right ml" style="margin-top: 6px;">{{shuju?.newCountCust}}</h5>
                            <div class="media-box-heading" style="margin:5px 0 0;"><span class="text-info m0">
                                {{('home.homepage.salesportal.newCountCust' | translate) || '本月新增'}}
                            </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list-group-item" style="margin-top:15px;">
                    <div class="media-box">
                        <div class="pull-left">
                            <span class="fa-stack">
                                <em class="fa fa-circle fa-stack-2x text-danger"></em>
                                <em class="fa fa-money fa-stack-1x fa-inverse text-white"></em>
                            </span>
                        </div>
                        <div class="media-box-body clearfix">
                            <h5 class="text-muted pull-right ml" style="margin-top: 6px;">{{('home.homepage.salesportal.yuan' | translate) || '¥'}}{{shuju?.custOrderFee|number:'1.2-2'}}</h5>
                            <div class="media-box-heading" style="margin:5px 0 0;">
                                <span class="text-danger m0">
                                    {{('home.homepage.salesportal.custOrderFee' | translate) || '客户订单总额'}}
                                </span>
                            </div>
                        </div>    
                    </div>
                </div>
                <div class="list-group-item" style="margin-top:15px;">
                    <div class="media-box">
                        <div class="pull-left">
                            <span class="fa-stack">
                                <em class="fa fa-circle fa-stack-2x text-success"></em>
                                <em class="fa fa-rmb fa-stack-1x fa-inverse text-white"></em>
                            </span>
                        </div>
                        <div class="media-box-body clearfix">
                            <h5 class="text-muted pull-right ml" style="margin-top: 6px;">{{('home.homepage.salesportal.yuan' | translate) || '¥'}}{{shuju?.thisMonthOrder|number:'1.2-2'}}</h5>
                            <div class="media-box-heading" style="margin:5px 0 0;">
                                <span class="text-success m0">
                                    {{('home.homepage.salesportal.thisMonthOrder' | translate) || '本月订单'}}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list-group-item" style="margin-top:15px;">
                    <div class="media-box">
                        <div class="pull-left">
                            <span class="fa-stack">
                                <em class="fa fa-circle fa-stack-2x text-warning"></em>
                                <em class="fa fa-rmb fa-stack-1x fa-inverse text-white"></em>
                            </span>
                        </div>
                        <div class="media-box-body clearfix">
                            <h5 class="text-muted pull-right ml" style="margin-top: 6px;">{{('home.homepage.salesportal.yuan' | translate) || '¥'}}{{shuju?.lastMonthOrder|number:'1.2-2'}}</h5>
                            <div class="media-box-heading" style="margin:5px 0 0;">
                                <span class="text-warning m0">
                                    {{('home.homepage.salesportal.lastMonthOrder' | translate) || '上月收入'}}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4" >
        <div class="panel ba">
            <!-- <div class="panel-heading"><strong>客户分布</strong></div> -->
            <div class="panel-body">
               <echarts-ng2 #kehufenbu [option]="meigui"></echarts-ng2>
            </div>
        </div>
    </div>
    <div class="col-lg-5">
        <div class="panel ba">
           <!--  <div class="panel-heading"><strong>月度订单收入</strong></div> -->
            <div class="panel-body">
                <echarts-ng2 #dingdanshouru [option]="zhu"></echarts-ng2>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-lg-6">
        <div class="panel ba">
            <div class="panel-heading" style="padding-top:15px;">
                <div class="panel-title" style="color:#333;font-weight:bold;font-family:'Microsoft YaHei';font-size:18px;">
                    {{('home.homepage.salesportal.customerTop5' | translate) || '客户Top5'}}   
                </div>
            </div>
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover text-center">
                        <thead>
                            <tr>
                                <th class="text-center">
                                    {{('home.homepage.salesportal.custName' | translate) || '客户名称'}}
                                </th>
                                <th class="text-center">
                                    {{('home.homepage.salesportal.industry' | translate) || '客户所属行业'}}
                                </th>
                                <th class="text-center">
                                    {{('home.homepage.salesportal.count' | translate) || '节点数'}}
                                </th>
                                <th class="text-center">
                                    {{('home.homepage.salesportal.fee' | translate) || '总订单金额'}}
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let item1 of singleData1">
                                <td [title]="item1.custName">{{item1.custName}}</td>
                                <td>{{item1.industry}}</td>
                                <td>{{item1.count}}</td>
                                <td style="color:#46bee9;">{{('home.homepage.salesportal.yuan' | translate) || '¥'}}{{item1.fee|number:'1.2-2'}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-6">
        <div class="panel ba">
            <div class="panel-heading" style="padding-top:15px;">
                <div class="panel-title" style="color:#333;font-weight:bold;font-family:'Microsoft YaHei';font-size:18px;">
                    {{('home.homepage.salesportal.customerInformation' | translate) || '客户订单信息'}}
                </div>
            </div>
            <div class="panel-body">
                <div class="table-responsive">
                    <table class="table table-striped table-hover text-center">
                        <thead>
                            <tr>
                                <th class="text-center" style="width:30%">
                                    {{('home.homepage.salesportal.orderId' | translate) || '订单'}}
                                </th>
                                <th class="text-center">
                                    {{('home.homepage.salesportal.custName' | translate) || '客户名称'}}
                                </th>
                                <th class="text-center">
                                    {{('home.homepage.salesportal.orderFee' | translate) || '订单金额'}}
                                </th>
                                <th class="text-center">
                                    {{('home.homepage.salesportal.orderState' | translate) || '订单金额'}}
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr *ngFor="let item2 of singleData2">
                                <td [title]="item2.orderId">{{item2.orderId}}</td>
                                <td [title]="item2.custName">{{item2.custName}}</td>
                                <td style="color:#46bee9;">{{('home.homepage.salesportal.yuan' | translate) || '¥'}}{{item2.orderFee|number:'1.2-2'}}</td>
                                <td *ngIf="item2.orderState == '2'" style="color:#FF8517;">
                                    {{('home.homepage.salesportal.unfinished' | translate) || '施工中'}}
                                </td>
                                <td *ngIf="item2.orderState == '3'" style="color:#24B145;">
                                    {{('home.homepage.salesportal.finished' | translate) || '施工完成'}}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>